<!DOCTYPE html>
<html>
<head>
    <title>数据管理 - 多模态搜索系统</title>
    <style>
        /* ... [基础样式保持不变] ... */
        .document-list {
            margin-top: 2rem;
        }
        .document-item {
            border: 1px solid #ddd;
            padding: 1rem;
            margin-bottom: 1rem;
            border-radius: 4px;
        }
        .document-item img {
            max-width: 200px;
            margin-top: 1rem;
        }
        .actions {
            margin-top: 1rem;
        }
        .btn-edit, .btn-delete {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 0.5rem;
        }
        .btn-edit {
            background-color: #ffc107;
            color: #000;
        }
        .btn-delete {
            background-color: #dc3545;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>数据管理</h1>
            <div class="user-info">
                <span>欢迎, {{ username }}</span>
                <a href="{{ url_for('index') }}" class="btn">返回主页</a>
                <a href="{{ url_for('logout') }}" class="logout-btn">登出</a>
            </div>
        </div>

        <div class="document-list" id="documentList">
            <!-- 文档列表将通过 JavaScript 动态加载 -->
        </div>
    </div>

    <script>
        // 加载文档列表
        async function loadDocuments() {
            try {
                const response = await fetch('/api/documents');
                const data = await response.json();
                
                const documentList = document.getElementById('documentList');
                documentList.innerHTML = '';
                
                data.documents.forEach(doc => {
                    const docElement = document.createElement('div');
                    docElement.className = 'document-item';
                    docElement.innerHTML = `
                        <h3>${doc.text}</h3>
                        <p>翻译: ${doc.translated}</p>
                        <p>分类: ${doc.category}</p>
                        ${doc.image_url ? `<img src="${doc.image_url}" alt="文档图片">` : ''}
                        <div class="actions">
                            <button class="btn-edit" onclick="editDocument('${doc.id}')">编辑</button>
                            <button class="btn-delete" onclick="deleteDocument('${doc.id}')">删除</button>
                        </div>
                    `;
                    documentList.appendChild(docElement);
                });
            } catch (error) {
                console.error('加载文档失败:', error);
            }
        }

        // 删除文档
        async function deleteDocument(docId) {
            if (!confirm('确定要删除这个文档吗？')) return;
            
            try {
                const response = await fetch(`/api/documents/${docId}`, {
                    method: 'DELETE'
                });
                const data = await response.json();
                if (data.status === 'success') {
                    loadDocuments();
                } else {
                    alert('删除失败: ' + data.message);
                }
            } catch (error) {
                console.error('删除文档失败:', error);
            }
        }

        // 编辑文档
        async function editDocument(docId) {
            // 实现编辑功能
            // ...
        }

        // 页面加载时获取文档列表
        document.addEventListener('DOMContentLoaded', loadDocuments);
    </script>
</body>
</html> 